<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/startMove.js"></script>
    <script type="text/javascript" src="js/handlebars-v4.0.11.js"></script>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        li{ list-style: none;}
        .list{ width:732px; margin:100px auto;}
        .list li{ width: 100px; height: 100px; text-align: center; line-height: 100px; float: left; margin:10px; cursor: pointer ; font-size: 40px;-webkit-user-select:none; background-color: #ccc;}
        .column-item{ position: absolute; background-color: #f90; width: 100px; height: 100px; text-align: center; line-height: 100px;-webkit-user-select:none;}
    </style>
</head>
<body>
    <div>
        <ul class="list" id="ul1">
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
            <li>+</li>
        </ul>
        <div class="column" id="columnList">
            <!-- <div 
            class="column-item" 
            v-for="item in lanlist" 
            :style="{'left':item.left+'px','top':item.top+'px'}"
            @mousedown="mymousedown"
            >
                {{item.title}}
            </div> -->
            
        </div>
    </div>
    <script id="columnItem" type="text/x-handlebars-template">
        <div 
        class="column-item" 
        style="left:{{left}}px; top:{{top}}px;"
        index="{{index}}"
        >
            {{title}}
        </div>
    </script>
</body>
</html>
<script type="text/javascript">
    var aLi = $('#ul1 li');
    var arr = [];
    var izIndex = 2;
function getPosition(){
    for( var i = 0; i < aLi.length; i++){  //获取盒子的位置并存放到数组arr里
        arr.push([aLi.eq(i).offset().left , aLi.eq(i).offset().top]);
    }
    for( var i = 0; i< aLi.length; i++){  //将浮动改为绝对定位，并正确赋值位置数值，并清除margin
        aLi.eq(i).css({'position':'absolute','left':arr[i][0] + 'px','top':arr[i][1] + 'px','margin': 0});
        aLi.eq(i).attr({can: '1',index:i}); 
        /*aLi[i].style.position = 'absolute';
        aLi[i].style.left = arr[i][0] + 'px';
        aLi[i].style.top = arr[i][1] + 'px';
        aLi[i].style.margin = 0;*/
        // aLi.eq(i).get(0).index = i;
        // drag(aLi.eq(i).get(0));
    }
    /*for( var i = 0; i< aLi.length; i++){   //给盒子赋值index，便于运动。执行移动函数
        aLi.eq(i).attr({
            can: '1'
        });
    }*/
}
getPosition();
$('#ul1 li').click(function(event) {
    if($(this).attr('can') == '1'){
        var index = $(this).index();
        // var list = vm.lanlist;
        var id = $('.column-item').length;
        var json = {
            index:index,
            title:'item'+(id + 1),
            left: arr[index][0],
            top: arr[index][1]
        }
        // list.push(json);
        var tpl =  $("#columnItem").html();
        var template = Handlebars.compile(tpl);
        var htmlTxt = template(json);
        $('#columnList').append(htmlTxt);
        drag($('.column-item').eq($('.column-item').length-1).get(0));
        $(this).attr('can','0')
        // vm.$set('lanlist',list );
    }
});
    /*var vm = new Vue({
        el:"#app",
        data:{
            lanlist:[],
            disX:0,
            disY:0,
            izIndex:2
        },
        methods:{
            'mymousedown': function(){
            }
        }
    })*/
    function drag(obj){    //图片移动函数
            var disX = 0;
            var disY = 0;
            obj.addEventListener('touchstart',function(e){
                obj.style.zIndex = izIndex++;
                var touch = e.changedTouches[0];
                disX = touch.pageX - obj.offsetLeft;
                disY = touch.pageY - obj.offsetTop;
            });
            obj.addEventListener('touchmove',function(e){
                var touch = e.changedTouches[0];  //当前手指，可以先输出e，看下结构
                obj.style.left = touch.pageX - disX + 'px';
                obj.style.top = touch.pageY - disY + 'px';
                for( var i=0 ;i<aLi.length; i++){
                    aLi[i].style.border = '';
                }
                var nL = nearLi(obj); //获取临近盒子更改边框
                if(nL){
                    nL.style.border = '2px solid red';
                }
            });
            obj.addEventListener('touchend',function(e){
                obj.onmousemove = null;
                obj.onmouseup = null;
                var nL = nearLi(obj);
                    var nlIndex = parseInt($(nL).attr('index'));
                    var tmp = 0;
                    var index = parseInt($(obj).attr('index'));
                    if(nL){
                        if($(nL).attr('can') == '1'){
                            tmp = $(obj).attr('index');
                            startMove( obj , {left : arr[nlIndex][0],top : arr[nlIndex][1]});
                            $(obj).attr('index',nlIndex);
                            $(aLi[index]).attr('can','1');
                            $(aLi[nlIndex]).attr('can','0');
                            nL.style.border = '';
                        }else{
                            var nlObj = $(".column-item[index='"+nlIndex+"']").get(0);
                            startMove( nlObj , {left : arr[index][0],top : arr[index][1]});
                            startMove( obj , {left : arr[nlIndex][0],top : arr[nlIndex][1]});
                            tmp = $(obj).attr('index');
                            $(obj).attr('index',nlIndex);
                            $(nlObj).attr('index',tmp);
                            console.log(tmp,nlIndex)
                            nL.style.border = '';
                        }
                    }else{
                        startMove( obj , {left : arr[index][0],top : arr[index][1]});
                    }
            });
        }
        function pz(obj1,obj2){ //是否碰撞，返回真或假
            var L1 = obj1.offsetLeft;
            var R1 = obj1.offsetLeft + obj1.offsetWidth;
            var T1 = obj1.offsetTop;
            var B1 = obj1.offsetTop + obj1.offsetHeight;
            var L2 = obj2.offsetLeft;
            var R2 = obj2.offsetLeft + obj2.offsetWidth;
            var T2 = obj2.offsetTop;
            var B2 = obj2.offsetTop + obj2.offsetHeight;
            if( R1<L2 || L1>R2 || B1<T2 || T1>B2){
                return false;
            }else{
                return true;
            }
        }
        function nearLi(obj){  //判断最临近图片，并返回此图片
            var value = 9999;
            var index = -1;
            for( var i = 0; i<aLi.length ; i++){   
                if(pz(obj,aLi[i]) && obj != aLi[i]){  //如果有碰撞，就计算距离
                    var c = jl(obj,aLi[i]);
                    if( c < value){  //通过这种方式循环，可以获得最小值c，从而获取index
                        value = c;
                        index = i;
                    }
                }
            }
            if( index != -1){
                return aLi[index];
            }else{
                return false;
            }
        }
        function jl(obj1,obj2){   //计算两个盒子的距离，以左上角为基准来计算
            var a = obj1.offsetLeft - obj2.offsetLeft;
            var b = obj1.offsetTop - obj2.offsetTop;
            return Math.sqrt(a*a + b*b);
        }
</script>